<template>
  <div class="shelf-list" :style="{top: shelfListTop}">
    <transition-group tag="div"
                      name="list"
                      id="shelf-list">
      <div class="shelf-list-item-wrapper" v-for="item in data" :key="item.id">
        <shelf-item :data="item" :style="{height: itemHeight}"></shelf-item>
        <div class="shelf-item-title-wrapper">
          <span class="shelf-list-title title-small">{{item.title}}</span>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>

import { storeShelfMixin } from '../../utils/mixin'
import ShelfItem from './ShelfItem'
import { px2rem, realPx } from '../../utils/utils'

export default {
  name: 'ShelfList',
  components: { ShelfItem },
  mixins: [storeShelfMixin],
  props: {
    top: {
      type: Number,
      default: 94
    },
    data: Array
  },
  computed: {
    shelfListTop () {
      return px2rem(this.top) + 'rem'
    },
    itemHeight () {
      // h = w * 350 / 250
      return ((window.innerWidth - realPx(120)) / 3) * 350 / 250 + 'px'
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .shelf-list
    position: absolute
    left: 0
    z-index: 100
    width: 100%
    #shelf-list
      display: flex
      flex-flow: row wrap // 水平排列，同时可以换行的
      width: 100%
      padding: 0 px2rem(15)
      box-sizing: border-box
    .shelf-list-item-wrapper
      flex: 0 0 33.33%
      width: 33.33%
      padding: px2rem(15)
      box-sizing: border-box
      &.list-leave-active
        // 不能使用block布局
        display: none
      &.list-move
        transition: transform .5s
      .shelf-item-title-wrapper
        margin-top: px2rem(10)
</style>
